<template>
    <div class="video_big">
        <div class="video_content">
            <div ref="move"
                :style="{ height: 100 * list.length + '%', top: -100 * video_index + '%', transform: `translateY(${top}px)`, }"
                class="video_move" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend">
                <div class="reset">
                    松手加载更多视频
                    <div ref="hr" class="hr">
                        <div></div>
                    </div>
                </div>
                <div @click.prevent="dbclick(item, index)" v-for="item, index in list" class="video_list" :key="index">
                    <video ref="video" :src="item.Video ? item.Video.videoPath : ''" class="content_cont"></video>
                    <div class="lsit_right">
                        <div class="toux">
                            <img @click.stop="router_my(item)"
                                :src="'http://43.138.15.137:3000' + (!item.Video.userAvatar ? '/assets/avatar/default.png' : item.Video.userAvatar)">
                        </div>
                        <div @click.stop="video_like(item, index)" class="video_love">
                            <div class="aixin">
                                <div class="left"></div>
                                <div class="right"></div>
                            </div>
                            <span class="number">{{ item.WSLCNum.likeNum ? item.WSLCNum.likeNum : '0' }}</span>
                        </div>
                        <div v-fangdou @click.stop="open_video_comments(item)" class="video_messge">
                            <div></div>
                            <div></div>
                            <div></div>
                            <span class="number">{{ item.WSLCNum.commentNum ? item.WSLCNum.commentNum : '0' }}</span>
                        </div>
                        <div class="video_share">
                            <div class="top_yuan"></div>
                            <div class="btm_yuan"></div>
                            <div class="lef_yuan"></div>
                            <div class="s1"></div>
                            <div class="s2"></div>
                            <span class="number">{{ item.WSLCNum.shareNum ? item.WSLCNum.shareNum : '0' }}</span>
                        </div>
                    </div>
                    <div class="video_title">
                        <div class="video_title_top">@ {{ item.Video.userNickname ? item.Video.userNickname : '匿名' }}
                        </div>
                        <div class="video_title_btm">
                            {{ item.Video.videoDesc ? item.Video.videoDesc : '无标题' }}
                        </div>
                    </div>
                    <div v-if="video_item_comments_flag" @click="video_comments_flag = true"
                        class="comments_big_content_list_item_btm">
                        <input ref="input" placeholder="有爱评论,说点好听的" type="text">
                        <div class="aite">@</div>
                        <div class="fasong">√</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="alert11" @click="closediv($event)">点击开始播放</div>
    <MyMessage :flag="alert_flag" :text="error_text" />
    <video_comments @post_comments="post_comments" v-model:flag='video_comments_flag' :list="video_comments_list" />
    <big_love :flag="big_love_flag" />
</template>
<script setup>
import { ref, reactive, defineAsyncComponent, watch, onMounted } from 'vue';
const video_comments = defineAsyncComponent(() => import('../common/video_comments.vue'))
const big_love = defineAsyncComponent(() => import('../common/big_love.vue'))
import { like_video, get_comments } from '../../api/api.js'
import { useRouter } from 'vue-router';
const router = useRouter()
const video = ref()
let props = defineProps(
    {
        list: {
            type: Array,
        },
        index: {
            default: () => 0
        },
        btmflag: {
            type: Boolean,
            default: () => false
        },
        video_item_comments_flag: {
            type: Boolean,
            default: () => false
        }
    }
)
let big_love_flag = ref(false)
let video_comments_list = ref([])
let video_comments_flag = ref(false)
let alert_flag = ref()
let error_text = ref()
let move = ref()
let hr = ref()
let video_index = ref(0)
let top = ref(0)
let height = 0
let start = 0
let dbclick_flag = false
let likeflag = false
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
watch(video_index, (newv, oldv) => {
    if (video.value[oldv]) {
        video.value[oldv].pause()
    }
    video.value[newv].play()
})

watch(() => props.index, (newValue, oldValue) => {
    video_index.value = newValue
})
function router_my(item) {
    console.log(item);
    // router.push(
    //     {
    //         path: '/router_my',
    //     }
    // )
}
function post_comments(data) {
    video_comments_list.value.unshift(data)
}
function open_video_comments(item) {
    if (!localStorage.getItem('user')) router.push('/user_page')
    video_comments_list.value = []
    like_video(`api/video/${item.Video.videoId}/getVideoComment/page/1`).then().then(res => {
        if (res) {
            if (res.data.code == 200) {
                video_comments_flag.value = true
                video_comments_list.value = res.data.data
            } else {
                alertfn('获取评论失败')
            }
        } else {
            alertfn('获取评论失败')
        }
    })
}
function dbclick(item, index) {
    if (!localStorage.getItem('user')) router.push('/user_page')
    if (likeflag) return
    if (dbclick_flag) {
        video_like(item, index)
        dbclick_flag = false
    } else {
        dbclick_flag = true
        setTimeout(() => {
            dbclick_flag = false
        }, 500)
    }
}
function video_like(item, index) {
    console.log('Aaaaa')
    if (!localStorage.getItem('user')) router.push('/user_page')
    if (likeflag) return
    like_video(`api/user/${item.Video.userId}/triggerLike/${item.Video.videoId}`).then().then(res => {
        if (item.likeflag) {
            item.WSLCNum.likeNum--
            document.querySelectorAll('.video_love')[index].querySelector('div').style = ``
            document.querySelectorAll('.video_love')[index].querySelector('div').querySelector('.right').style = ``
            document.querySelectorAll('.video_love')[index].querySelector('div').querySelector('.left').style = ``
            document.querySelectorAll('.video_love')[index].querySelector('div').classList.add('like')
            document.querySelectorAll('.video_love')[index].querySelector('div').classList.remove('like')
            item.likeflag = false
            big_love_flag.value = false
            alertfn('取消点赞成功')
        } else {
            item.WSLCNum.likeNum++
            document.querySelectorAll('.video_love')[index].querySelector('div').style = `background:red;`
            document.querySelectorAll('.video_love')[index].querySelector('div').querySelector('.right').style = `background:red;`
            document.querySelectorAll('.video_love')[index].querySelector('div').querySelector('.left').style = `background:red;`
            document.querySelectorAll('.video_love')[index].querySelector('div').classList.add('like')
            item.likeflag = true
            big_love_flag.value = true
            alertfn('点赞成功')
        }
    })
    likeflag = true
    setTimeout(() => {
        likeflag = false
    }, 1000)
}
function touchstart(e) {
    start = e.changedTouches[0].pageY
    height = document.body.offsetHeight
    move.value.style = `height: ${100 * props.list.length + '%'}; top:${-100 * video_index.value + '%'};`
    bottom_none()
}
function touchmove(e) {
    top.value = e.changedTouches[0].pageY - start
    if (top.value <= -height) {
        top.value = -height
    } else if (top.value >= height) {
        top.value = height
    }
    if (video_index.value == 0) {
        hr.value.style = `height: ${(top.value - 100)}px;`
    }
}
function touchend(e) {
    if (e.changedTouches[0].pageY - start >= height / 2) {
        if (video_index.value !== 0) {
            video_index.value--
        }
    } else if (e.changedTouches[0].pageY - start <= -height / 2) {
        if (video_index.value !== props.list.length - 1) {
            video_index.value++
        }
    }
    top.value = 0
    move.value.style = `height: ${100 * props.list.length + '%'}; top:${-100 * video_index.value + '%'}; transition: top 0.5s , transform 0.5s;`
    if (video_index.value == 0) {
        hr.value.style = `transition: all 0.7s; height:0;`
        move.value.style = `height: ${100 * props.list.length + '%'}; top:${-100 * video_index.value + '%'}; transition: top 1s , transform 1s;`
    }
    bottom_block()
}
function bottom_block() {
    if (props.btmflag) {
        document.querySelector('.bottom_router').classList.remove('toum2')
        document.querySelector('.bottom_router>div').style = `color: rgb(255, 255, 255, 0.3);`
        document.querySelector('.bottom_router>span').classList.remove('toum')
        document.querySelector('.bottom_router .bottom_router_center').style = ` `
        document.querySelector('.bottom_router .shu').style = ``
        document.querySelector('.bottom_router .heng').style = ``
    }
}
function bottom_none() {
    if (props.btmflag) {
        document.querySelector('.bottom_router').classList.add('toum2')
        document.querySelector('.bottom_router>div').style = `color: rgb(255, 255, 255 , 0.3);`
        document.querySelector('.bottom_router>span').classList.add('toum')
        document.querySelector('.bottom_router .bottom_router_center').style = `border-color: rgba(134, 134, 134, 0.3); `
        document.querySelector('.bottom_router .shu').style = `background-color: rgba(255, 255, 255, 0.3);`
        document.querySelector('.bottom_router .heng').style = `background-color: rgba(255, 255, 255, 0.3);`
    }
}
function closediv(e) {
    video.value[props.index].play()
    e.target.style = 'display:none;'
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

@keyframes like {
    to {
        transform: rotate(-45deg) translate(-50%, -50%) scale(1.2);
    }
}



.comments_big_content_list_item_btm {
    position: absolute;
    bottom: 0;
    left: 0;
    height: r(50);
    width: 100%;
    background-color: #fff;
    display: flex;
    background: #1a1b20;

    .aite,
    .fasong {
        width: r(44);
        height: 100%;
        text-align: center;
        color: #e8e8e9;
        font-size: r(14);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input {
        flex: 1;
        background-color: #62626000;
        padding-left: r(10);
        font-size: r(14);
        color: #e8e8e9;
    }
}

.alert11 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 0.5rem;
    color: #fff;
    box-sizing: content-box;
    padding: 0.7rem;
    border-radius: 0.3rem;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.like {
    animation: like 0.5s linear;
}

.reset {
    color: #fff;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    height: r(25);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: r(16);

    .hr {
        position: absolute;
        width: r(3);
        left: 50%;
        bottom: 200%;
        transform: translateX(-50%);
        background-color: #fff;
    }

    .hr::before {
        content: ' ';
        display: block;
        position: absolute;
        width: r(10);
        height: r(2);
        background-color: #fff;
        top: 0;
        left: 0;
        transform: rotate(30deg);
    }

    .hr::after {
        content: ' ';
        display: block;
        position: absolute;
        width: r(10);
        height: r(2);
        background-color: #fff;
        top: 0;
        right: 0;
        transform: rotate(-30deg);
    }
}

.video_big {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    z-index: 5;

    .video_content {
        width: 100%;
        height: 100%;

        .video_move {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: top 1s;

            .video_list {
                height: 100vh;
                width: 100%;
                background-color: #000;
                position: relative;
                color: #fff;

                .lsit_right {
                    position: absolute;
                    right: r(15);
                    bottom: r(110);
                    height: r(270);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 2;
                }
            }
        }
    }
}

.content_cont {
    width: 100%;
    max-height: r(420);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.video_title {
    position: absolute;
    bottom: r(70);
    width: 70%;
    left: r(5);

    .video_title_top {
        width: 100%;
        word-wrap: normal;
        font-size: r(16);
        color: #fff;
        margin-bottom: r(10);
    }

    .video_title_btm {
        font-size: r(14);
    }
}

.number {
    position: absolute;
    bottom: r(-25);
    color: #fff;
    font-size: r(12);
    width: 100%;
    text-align: center;
}

.video_share {
    width: r(40);
    height: r(40);
    position: relative;

    .s1 {
        width: r(12);
        height: r(3);
        background-color: #fff;
        position: absolute;
        top: r(10);
        left: 50%;
        transform-origin: right center;
        transform: translateX(-50%) rotate(-30deg);
    }

    .s2 {
        width: r(12);
        height: r(3);
        background-color: #fff;
        position: absolute;
        bottom: r(10);
        left: 50%;
        transform-origin: right center;
        transform: translateX(-50%) rotate(30deg);
    }

    .top_yuan {
        position: absolute;
        top: r(5);
        right: r(5);
        width: r(10);
        height: r(10);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
    }

    .btm_yuan {
        position: absolute;
        bottom: r(5);
        right: r(5);
        width: r(10);
        height: r(10);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
    }

    .lef_yuan {
        position: absolute;
        top: 50%;
        left: r(5);
        width: r(14);
        height: r(14);
        border-radius: 50%;
        box-sizing: border-box;
        border: r(3) solid #fff;
        transform: translateY(-50%);
    }
}

.video_messge {
    width: r(40);
    height: r(40);
    border-radius: 50%;
    box-sizing: border-box;
    border: r(3) solid #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    div {
        width: r(5);
        height: r(5);
        background-color: #fff;
        border-radius: 50%;
    }
}

.video_love {
    position: relative;
    width: r(40);
    height: r(40);

    .aixin {
        position: absolute;
        left: 65%;
        top: 30%;
        transform: rotate(-45deg) translate(-50%, -50%);
        background-color: #fff;
        width: r(24);
        height: r(24);
        transition: all 0.5s;
    }
}

.aixin .right {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: #fff;
    top: -50%;
    left: 0;
    transition: all 0.5s;
}

.aixin .left {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: #fff;
    right: -50%;
    top: 0;
    transition: all 0.5s;
}


.toux {
    width: r(40);
    height: r(40);

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #fff;
    }
}

.video_search_content {
    position: absolute;
    right: r(25);
    top: r(25);
    z-index: 2;
    width: r(24);
    height: r(24);

    .video_search_yaun {
        position: absolute;
        top: 0;
        left: 0;
        width: r(18);
        height: r(18);
        border: r(2) solid #eee;
        border-radius: 50%;
    }

    .video_search_shu {
        height: r(2);
        width: 50%;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #eee;
        transform-origin: bottom right;
        transform: rotate(45deg);
    }
}
</style>